<template>
	<tm-app color="#efefef">		
			<view class="flex flex-between pl-30 FormM1">
				<navbar-module title="待入栏工单" :transprent="true"/>
			</view> 
			<tm-sheet :padding="[2,2]" style="margin-top:-200rpx">
				<tm-cell bottomBorder :margin="[0,0]" title="工单编号" :titleFontSize="32" :rightTextSize="32">
					<template v-slot:right>
						<tm-text :fontSize="32">{{data?.code}}</tm-text>
					</template>
				</tm-cell>
				<tm-cell bottomBorder :margin="[0,0]" title="猪仔名称" :titleFontSize="32" :rightTextSize="32">
					<template v-slot:right>
						<tm-text :fontSize="32">{{data?.pig.name}}</tm-text>
					</template>
				</tm-cell>
				<tm-cell bottomBorder :margin="[0,0]" title="猪仔品种" :titleFontSize="32" :rightTextSize="32">
					<template v-slot:right>
						<tm-text :fontSize="32">{{data.pig.pigLevel.breed.name}}</tm-text>
					</template>
				</tm-cell>
				<tm-cell bottomBorder :margin="[0,0]" title="喂养方式" :titleFontSize="32" :rightTextSize="32">
					<template v-slot:right>
						<tm-text :fontSize="32">{{data.content.mode.label}}</tm-text>
					</template>
				</tm-cell>
			</tm-sheet>
			
			
			<view>
				<tm-form @submit="confirm" ref="form" v-model="FormData" :label-width="190">
					<tm-form-item required label="猪仔天数" field="content.day" :rules="[{ required: true, message: '请填写猪仔天数' }]" style="fontSize:50rpx !important">
						<!-- <tm-input v-model.lazy="FormData.content.day" type="number" :fontSize="32" :showBottomBotder="false" suffixLabel="天"/> -->
						<tm-stepper v-model="FormData.content.day" :defaultValue="data.content.day" :width="400" :height="64" :min="data.content.day" :fontSize="32"></tm-stepper>
					</tm-form-item>
					<tm-form-item required label="耳标编号" field="content.rfid" :rules="[{required:true,message:'请填写耳标编号'}]">
						<tm-input v-model="FormData.content.rfid" :fontSize="32">
							<template v-slot:right>
								<tm-icon name="tmicon-scan" @click="takePhoto()"/>
							</template>
						</tm-input>
					</tm-form-item>
					<tm-form-item required label="所属猪圈" field="content.pigsty.name" :rules="[{required:true,message:'请选择所属猪圈'}]">
						<view @click="showPicker = !showPicker" class="flex flex-row flex-row-center-between">
							<tm-text :userInteractionEnabled="false" :fontSize="32" :label="FormData.content.pigsty.name || '请选择入栏猪圈'"/>
							<tm-icon :userInteractionEnabled="false" :font-size="26" name="tmicon-angle-right"/>
						</view>
					</tm-form-item>
				</tm-form>
			</view>
			
			
			<view style="position: absolute;bottom:0; width: 750rpx;">
				<tm-button :margin="[20]" block size="large" :linear-color="['#FADC19', '#23C343']" linear="right" :height="90" :shadow="0" :fontSize="34" label="确定入栏" @click="confirm"/>
			</view>

			
			<tm-drawer ref="drawer" placement="bottom" v-model:show="showPicker" closeable>
				<view class="px-40">
					<view style="height:360rpx;overflow:auto">
						<tm-radio-group v-if="pickerlist.length>0" model="button" v-model="FormData.content.pigsty.code">
							<tm-grid :width="650" :col="3">
								<tm-grid-item v-for="item in pickerlist" :key="item.value">
									<tm-radio :value="item.value" :label="item.label" color="#60ab41" :fontSize="32"></tm-radio>
								</tm-grid-item>
							</tm-grid>
						</tm-radio-group>
						<tm-text v-else label="无独圈可用, 请联系管理员新增!" color="#ff9a2e" :fontSize="32"></tm-text>
					</view>
					<template v-slot:foot>
					    <tm-button block label="确认选择" color="#60ab41" @click="choose" :fontSize="34"></tm-button>
					</template>
				</view>				
			</tm-drawer>
			
			<tm-message ref="msg" :lines="2"/>
			<tm-notification placement="top" ref="notif" :offset="[32,90]"/>
			  
			<tm-modal color="white" :overlayClick="false" hideCancel splitBtn :height="350" v-model:show="showWin">
				<template v-slot:button>
					<view class="fulled">
						<tm-button label="确定" color="#ff9a2e" :fontSize="34" block :round="10" @click="showWin = false"></tm-button>
					</view>
				</template>
				<tm-text label="无独圈可用, 请联系管理员新增" :font-size="36" color="deep-orange" class="flex flex-center"></tm-text>
			</tm-modal>
	</tm-app>
</template>

<script setup lang='ts'>
import { reactive,ref,nextTick } from "vue";
import { onLoad} from "@dcloudio/uni-app"
import {basicPigstyOptions,addEnter,startVideo} from '../../index/resource/http'
import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'

const msg = ref<InstanceType<typeof tmMessage> | null>(null)
const notif = ref<InstanceType<typeof tmNotification> | null>(null)

const drawer = ref(null)

    const data = ref(null) 
	const btnFlag = ref(true)
	
	const form = ref(null)
    const isOrganic = ref(null)
	
	const showWin = ref(false)
 
    onLoad(option=>{
		data.value = JSON.parse(decodeURIComponent(option.data))
		isOrganic.value = data.value.pig.pigLevel.breed.isOrganic
		FormData.content.day = data.value.content.day
		getData()
	})
	
    const FormData = reactive({
		code:'',
		content:{
			day:null,
			id:'',
			rfid:'',
			mode:null,
			pigsty:{
				code:'',
				name:'',
			}
		}
		
	})
	
	const showPicker = ref(false)
	const pickerlist = ref([])
	
 	const getData = async () => {
		const {data} = await basicPigstyOptions(isOrganic.value)
		pickerlist.value = data
		if(data.content.mode.label==='ALONE' &&pickerlist.value.length===0){
			showWin.value = true
		}
	}
	
	
	const takePhoto = () => {
		uni.scanCode({
			success: function (res) {
			   FormData.content.rfid = res.result
			}
		});
	}
	
	const confirm = async () => {
		// 执行form表单校验
		form.value.validate()
		
		//提交表单接口
		FormData.code = data.value.code
		FormData.content.id = data.value.content.id
		FormData.content.mode = data.value.content.mode.value
		FormData.content.day = Number(FormData.content.day)
		
		await addEnter(FormData).then(res=>{
			if(res.code == '0'){
				msg.value.show({ model: 'success' })
				setTimeout(()=>{
					uni.navigateBack()
				},1300)
			}else{
				nextTick(() => {
					notif.value?.show({ label: res.message,color:'#FF837F',duration:5000 })
				})
			}
		}).catch(err=>{
			notif.value?.show({label: '请求出错',color:'#ff837f'})
		})
	}
	
	
	const goback = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	
	const start = async ()=>{
	  const res = await startVideo(data.value.code)
		if(res.code == 0){
			btnFlag.value = false
		}else{
			notif.value?.show({label:res.message,color:'#FF837F'})
		}
	}
	
	const choose = () => {
		if(FormData.content.pigsty.code){
			// 显示name 
			pickerlist.value.forEach(item=>{
				if(item.value===FormData.content.pigsty.code){
					FormData.content.pigsty.name = item.label
				}
			})
			// 关闭
			drawer.value.close()
		}else{
			notif.value?.show({label:'还未选择',color:'#FF837F'})
		}
	}
</script>

<style>

</style>
